<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07电影卡片练习</title>
    <link rel="stylesheet" href="./resource/reset.css">
    <link rel="stylesheet" href="./resource/fontawesome/css/all.css">
    <style>
        .clearfix:before,
        .clearfix:after {
            content: " ";
            clear: both;
            display: table;
        }
        .outer{
            width: 240px;
            /* background-color: #bfa; */
            margin: auto;
        }
        /* 设置text文字容器 */
        .text{
            color: rgb(204,204,204);
            font-size: 14px;
        }
        .text>h2{
            color: rgb(126, 126, 126);
            font-size: 16px;
            margin: 15px auto 15px 20px;
        }
        .fa-map-marker-alt{
            margin-left: 23px;
            margin-bottom: 25px;
            margin-right: 5px;
        }
        .text>p{
            display: block;
            margin: auto 20px 40px 20px;
        }
        /* 设置评分容器 */
        .judge{
            color: rgb(204,204,204);
            padding: 15px 30px 15px 15px;
            border-top: 1px solid #999;
        }
        .judge>ul>li{
            float: left;
        }
        .judge>i{
            float: right;
        }
        .light{
            color: rgb(182,194,58);
        }
    </style>
</head>
<body>
    <!-- 整体的外部容器 -->
    <div class="outer">
        <!-- 图片容器 -->
        <div class="picture">
            <img src="./resource/07图片.jpeg" alt="">
        </div>

        <!-- 文字容器 -->
        <div class="text">
            <h2>动画电影</h2>
            <i class="fas fa-map-marker-alt"></i>
            电影
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi ullam error illum. Harum ex, magnam fuga recusandae voluptatum totam repudiandae, id enim porro inventore ut unde, nihil est dignissimos! At!</p>
        </div>

        <!-- 评分容器 -->
        <div class="judge clearfix">
            <ul>
                <li class="start light">
                    <i class="fas fa-star"></i>
                </li>
                <li class="start light">
                    <i class="fas fa-star"></i>
                </li>
                <li class="start">
                    <i class="fas fa-star"></i>
                </li>
                <li class="start">
                    <i class="fas fa-star"></i>
                </li>
            </ul>
            <i class="fab fa-weibo"></i>
        </div>

    </div>
</body>
</html>